<template>
  <el-popover
      placement="bottom"
      trigger="click"
      width="300px"
  >
    <template #reference>
      <el-button>
        <el-icon v-if="modelValue"><component :is="modelValue" /></el-icon>
        <span v-else>选择图标</span>
      </el-button>
    </template>

    <div class="icon-grid">
      <div
          v-for="icon in icons"
          :key="icon"
          class="icon-item"
          @click="$emit('update:modelValue', icon)"
      >
        <el-icon :size="20"><component :is="icon" /></el-icon>
      </div>
    </div>
  </el-popover>
</template>

<script setup>
import * as Icons from '@element-plus/icons-vue'

defineProps({
  modelValue: String
})

defineEmits(['update:modelValue'])

const icons = Object.keys(Icons)
</script>

<style scoped>
.icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.icon-item:hover {
  background-color: #f5f7fa;
}
</style>